import React, {useEffect, useState} from 'react';
import style from './LiveRecord.module.scss'
import MySurfacePlotTop from "../../component/MySurfacePlotTop/MySurfacePlotTop";
import MyRecordList from "../../component/MyRecordList/MyRecordList";
import {Divider, message, Spin} from "antd";
import {getUserOne, inquirePersonalCircleDateList} from "./LiveRecordApi";

const More = (props) => {
    if (props.state) {
        return (
            <div className={style.example}>
                <Spin/>
            </div>
        )
    } else {
        return (
            <div className={style.more} onClick={props.setLoadingProps}>
                查看更多
            </div>
        )
    }
}

// 生活
function LiveRecord() {
    const [List, setList] = useState([])
    const [ListQuery, setListQuery] = useState({page: 1, limit: 4})
    const [loading, setLoading] = useState(false)
    const [adminUserData, setAdminUserData] = useState({})
    // 请求数据
    const getList = () => {
        setLoading(true)
        inquirePersonalCircleDateList({ListQuery}).then(res => {
            if (res.code === '200') {
                setList([
                    ...List, ...res.data
                ])
            } else {
                message.error('查询失败')
            }
        }).catch(() => {
            message.error('查询失败')
        }).finally(e => {
            setLoading(false)

        })
    }

    const adminNumber = process.env.REACT_APP_BASE_ADMIN
    //请求本人数据
    const getAdminUserData = () => {
        getUserOne({userNumber: adminNumber}).then(res => {
            if (res.code === '200') {
                setAdminUserData({
                    userPhotoUrl: res.data[0].userPhotoUrl,
                    userName: res.data[0].userName,
                })
            } else {
                message.error('请求数据失败，请联系管理员33333')
            }
        }).catch((e) => {
            console.log(e)
            message.error('请求数据失败，请联系管理员11111')
        })
    }

    const setLoadingFun = () => {
        setLoading(true)
        setListQuery({...ListQuery, page: ListQuery.page + 1})
    }

    useEffect(() => {
        getList()
        getAdminUserData()
    }, [ListQuery])

    return (
        <div className={style.LiveRecord}>
            <MySurfacePlotTop
                blogTitle='唯有爱与美食不可辜负，还有游戏。'
                blogCoverTitle='生活是一场奇妙的旅程，充满了挑战与美好。无论经历何种风雨，都要保持积极向上的态度，珍惜每一个瞬间，学会感恩和宽容。在困难中找到力量，在快乐中获得满足。生活是唯一的，让我们用心去体验、品味，创造出属于自己的精彩人生！'
                blogTypeState={false}
            >
            </MySurfacePlotTop>
            <div className={style.LiveRecordBody}>
                {List.map(i => {
                    // console.log(i)
                    return (
                        <div key={i.id}>
                            <MyRecordList adminUserData={adminUserData}
                                          text={i.circleContent}
                                          createdAt={i.createdAt}>

                            </MyRecordList>
                            <Divider></Divider>
                        </div>
                    )
                })}
                <More state={loading} setLoadingProps={setLoadingFun}></More>
            </div>
        </div>
    );
}

export default LiveRecord;
